<template>
  <div class="kxz-home--adminer">
    <section class="container">
      <h2 class="title">
        <i class="icon icon-pb"></i>今天排班</h2>
      <table class="content--pb">
        <tr>
          <th v-if="cuUserType === 2 || cuUserType === 5" colspan="2">{{cuJRPBTitle}}</th>
          <template v-else-if="cuUserType === 1">
            <th v-for="(item,index) in cuJRPBTitle" :key="index" colspan="2">{{item}}</th>
          </template>
        </tr>
        <tr>
          <td v-for="(item,index) in cuOrderTitles" :key="index" colspan="2" v-text="item"></td>
        </tr>
        <tr>
          <td v-if="cuJRPB.length === 0" colspan="2">
            暂无记录
          </td>
          <template v-else>
            <td v-for="(subGroup, sIndex) in cuJRPB" :key="sIndex" colspan="2">
              <table class="subOrderInDay" :class="subGroup.length > 0? 'unemptyArr' : ''">
                <tr>
                  <td v-if="subGroup.length === 0" v-text="'暂无记录'"></td>
                  <td v-for="(ssItem,ssIndex) in subGroup" :key="ssIndex" v-text="ssItem.kfName || '无名氏'"></td>
                </tr>
              </table>
            </td>
          </template>
        </tr>
      </table>
    </section>
    <section class="container zj">
      <h2 class="title">
        <i class="icon icon-pb"></i>质检信息
      </h2>
      <p class="zrjk__top k-clearfix" >
        <el-date-picker
          v-model="zj.timeDur"
          class="posLeft"
          type="daterange"
          @change="getZJ"
          placeholder="选择日期范围">
        </el-date-picker>
        <template v-if="power === 1">
          <el-button
              v-for="item in admin.group"
              :key="item.value"
              :class="zj.selGid === item.value ?'active' : ''"
              @click="handleChangeGroupZJ(item.value)"
              v-text="item.label"
            >
          </el-button>
        </template>
      </p>
      <table>
        <tr>
          <th v-for="(item,index) in zj.titleList" :key="index" v-text="item.label"></th>
        </tr>
        <template v-if="zj.tableData.length > 0">
          <tr v-for="(item,index) in zj.tableData" :key="index">
            <td>{{item.UserName}}</td>
            <router-link tag="td" to="/zj-lists" class="click">
              {{item.zcount_callin}}
            </router-link>
            <router-link tag="td" to="/zj-lists" class="click">
              {{item.zcount_callout}}
            </router-link>
            <td>{{item.zcount_zscpj}}</td>
            <td>{{item.pj}}</td>
            <td>{{item.da}}</td>
            <td>{{item.xiao}}</td>
            <td>{{item.num}}</td>
          </tr>
        </template>
        <tr v-if="zj.tableData.length === 0">
          <td :colspan="zj.titleList.length">暂无记录</td>
        </tr>
      </table>
    </section>
    <section class="container">
       <p class="zrjk__top" v-if="power === 1">
          <el-button
            v-for="item in admin.group"
            :key="item.value"
            :class="admin.selGid === item.value ?'active' : ''"
            @click="handleChangeGroup(item.value)"
            v-text="item.label"
          >
          </el-button>
      </p>
      <h2 class="title">
        <i class="icon icon-th"></i>昨日通话监控</h2>
      <div class="content--zr scrollContainer">
        <table>
        <tr>
          <th v-for="(item,index) in th.titleList" :key="index" v-text="item.label"></th>
        </tr>
        <template v-for="(subArr, subKey) in cuZRTH">
          <tr v-for="(item,index) in subArr" :key="index">
            <td>{{item.UserName}}</td>
            <td>{{item.zxsj}}</td>
            <td>{{item.zcount_y}}</td>
            <td>{{item.zcount_zscpjyjt}}</td>
            <td>{{item.zcount_callin_y}}</td>
            <td>{{item.zcount_callin_zscpj}}</td>
            <td @click="handleOpenMyd(item.adminid,item.UserName)">查看</td>
          </tr>
        </template>
        <tr v-if="zj.tableData.length === 0">
          <td :colspan="zj.titleList.length">暂无记录</td>
        </tr>
      </table>
      </div>
    </section>
    <myd :PkfName="kfName" :PsDialog="sDialog" :PmydData="mydData" @oncloseDialog="revCloseDialog"></myd>
  </div>
</template>

<script>
import Myd from '../../../components/myd'
import { dateFormat } from 'vux'
export default {
  name: 'adminer',
  data() {
    const {power} = this.$store.getters.getUserInfo
    const nowDate = new Date()
    const ztDate = nowDate.setDate(nowDate.getDate() - 1)
    const timeDur = [ztDate,ztDate]
    return {
      // 添加参数
      zj:{
        selGid:104,
        timeDur,
        tableData:[],
        titleList:[
          {
            label:'客服姓名',
          },
          // {
          //   prop:'kf',
          //   label:'进入质检表电话量',
          // },
          {
            label:'呼入量',
          },
          {
            label:'呼出量',
          },
          {
            label:'平均通话时长',
          },
          {
            label:'平均分',
          },
          {
            label:'最高分',
          },
          {
            label:'最低分',
          },
          {
            label:'转工单数',
          },
        ],
      },
      //
      th:{
        titleList:[
          {
            label:'姓名',
          },{
            label:'在线时间(h)',
          },{
            label:'通话量',
          },{
            label:'平均时长(m)',
          },{
            label:'在线客户解答量',
          },{
            label:'平均解决时长(m)',
          },{
            label:'满意度',
          }
        ]
      },
      power,
      localGroupStr: ['YWZ', 'DYZ', 'HFZ'],  // 根据Str限定组顺序
      localGroupNum: {                       // 根据Num限定组顺序
        104: [],
        100: [],
        112: []
      },
      jrpb: null,   // 今日排班
      gdjk: null,   // 工单监控
      zrth: null,   // 昨日通话
      kfName: '',
      sDialog: false,
      mydData: {},
      admin:{
        selGid:104,
        group:[    // 只有admin登录才会出现
          {label:'业务组',value:104},
          {label:'答疑组',value:100},
          {label:'回访组',value:112},
        ]
      }
    }
  },
  components: {
    Myd
  },
  computed: {
    cuUserInfo(){
      return this.$store.getters.getUserInfo
    },
    cuOrderTitles() {
      const { power } = this.$store.getters.getUserInfo
      const configOrderTitle = ['值班']
      if (power === 2 || power === 5) {
        return configOrderTitle
      } else if (power === 1) {
        return [...configOrderTitle, ...configOrderTitle, ...configOrderTitle]
      }
    },
    cuJRPBTitle(){  // 容错处理   ##之后优化
      const { power, userGroupId } = this.$store.getters.getUserInfo
      const groups = this.$store.getters.getGroup
      if (power === 1) {
        return ['业务组', '答疑组', '回访组']
        // return groups[this.admin.selGid.toString()]
      } else {
        return groups[userGroupId.toString()]
      }
    },
    cuTitles() {
      const { power, userGroupId } = this.$store.getters.getUserInfo
      const groups = this.$store.getters.getGroup
      if (power === 1) {
        // return ['业务组', '答疑组', '回访组']
        return groups[this.admin.selGid.toString()]
      } else {
        return groups[userGroupId.toString()]
      }
    },
    cuUserType() {
      return this.$store.getters.getUserInfo.power
    },
    cuJRPB() {
      const {userGroup} = this.$store.getters.getUserInfo
      const orderInDay = this.jrpb
      const localGroupStr = this.localGroupStr
      const cuUserType = this.cuUserType
      let tmpa = []
      let selGEN = ''
      if (orderInDay && Object.keys(orderInDay).length > 0) {
        if(cuUserType === 2 || cuUserType === 5){
          selGEN = this._gCN2gEN(userGroup)
        }
        localGroupStr.forEach(item => {
          if(selGEN && selGEN === item){
            tmpa.push(orderInDay[item])
          }else if(!selGEN){
            tmpa.push(orderInDay[item])
          }
        })
        tmpa.forEach((tItem, tIndex) => {
          const ta = []
          for(let k in tItem){
            // let i = k.includes('MorKefu') ? 0 : 1
            // ta[i] = tItem[k]
            /**
             * 更改需求：只要晚班，并把晚班改成值班
             */
            if(k.includes('NigKefu')){
              ta.push(tItem[k])
            }
          }
          tmpa = [...tmpa, ...ta]
          tmpa.splice(0, 1)
        })
      }
      return tmpa
    },
    cuZRTH() {
      // const tmpo = Object.assign({},this.localGroupNum)
      const tmpo = {                       // 根据Num限定组顺序
        104: [],
        100: [],
        112: []
      }
      const zrth = this.zrth
      if (zrth && zrth.length > 0) {
        zrth.forEach(item => {
          tmpo[item.UserGroupId].push(item)
        })
      }
      return tmpo
    }
  },
  mounted() {
    // 获取今日排班信息
    this.getJRPB()
    // 获取昨日通话监控
    let {power,userGroupId} = this.$store.getters.getUserInfo
    if(power === 1){
      userGroupId = this.admin.selGid
    }
    this.getZRTH(userGroupId)
    // 获取质检信息
    if(power === 2){
      this.zj.selGid = userGroupId
    }
    this.getZJ()
  },
  methods: {
    handleOpenMyd(adminid, userName) {
      this.sDialog = true
      this.kfName = userName
      this.getMyd(adminid)
    },
    handleChangeGroupZJ(gid){
      this.zj.selGid = gid
      this.getZJ()
    },
    handleChangeGroup(gid){
      this.admin.selGid = gid
      this.getZRTH(gid)
    },
    revCloseDialog() {
      this.sDialog = false
    },
    _gCN2gEN(CN){
      switch(CN){
        case '业务组':
          return 'YWZ'
        case '答疑组':
          return 'DYZ'
        case '回访组':
          return 'HFZ'
      }
    },
    isEmpty(cuZRTH) {
      const userType = this.cuUserType
      const empty3Arr = this._is3EmptyArr(cuZRTH)
      return userType === 2 && empty3Arr
    },
    _is3EmptyArr(cuZRTH) {
      let flag = true
      if (Object.prototype.toString.call(cuZRTH) === '[object Object]') {
        Object.values(cuZRTH).forEach(item => {
          if (item.length > 0) {
            flag = false
          }
        })
      }
      return flag
    },
    async getJRPB() {  // 获取今日排班信息
      try {
        const { data } = await this.$get(this, {
          api: 'order/selectKFInToday.do',
        })
        if (data.state === 0) {
          this.jrpb = data.content
        }
      } catch (e) {
        this.$warn('系统order/selectKFInToday.do接口报错')
      }
    },
    async getZRTH(gid) {   // 获取昨日通话监控
      try {
        // const { sessionId } = this.$store.getters.getUserInfo
        const { data } = await this.$get(this, {
          api: 'user/indexCall.do',
          data: {
            // sessionId
            groupId:gid
          }
        })
        if (data.state === 0) {
          this.zrth = data.content
        }
      } catch (e) {
        this.$warn('系统user/indexCall.do接口报错')
      }
    },
    async getZJ(){
      const timeDur = this.zj.timeDur
      const userGroupId = this.zj.selGid
      try{
        const {data} = await this.$get(this,{
          api:'ajaxapi/zjbb.do',
          data:{
            st:timeDur && dateFormat(timeDur[0], 'YYYY-MM-DD') || '',
            et:timeDur && dateFormat(timeDur[1], 'YYYY-MM-DD') || '',
            groupId:userGroupId,
            kfid:'',
            kfName:''
          }
        })
        if(data.state === 0){
          this.zj.tableData = data.content
          return
        }
        this.$warn('ajaxapi/zjbb.do接口数据异常')
        console.log('ajaxapi/zjbb.do数据异常:',data.message)
      }catch(e){
        this.$warn('ajaxapi/zjbb.do接口响应报错')
        console.log('ajaxapi/zjbb.do响应报错:',e.message)
      }
    },
    async getMyd(adminid) {
      try {
        const { data } = await this.$get(this, {
          api: 'ajaxapi/mydtj.do',
          data: {
            adminid,
            fff: 1
          }
        })
        if (data.state === 0) {
          this.mydData = data.content
        }
      } catch (e) {
        this.$warn('系统ajaxapi/mydtj.do接口报错')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$bdColor: #bac2cb;
.container {
  $color: #444;
  $dftColor: #7b8897;
  .icon {
    &.icon-pb {
      background-image: url(../images/icon-pb.png);
    }
    &.icon-gd {
      background-image: url(../images/icon-gd.png);
    }
    &.icon-th {
      background-image: url(../images/icon-th.jpg);
    }
  }
  table {
    &.content--pb {
      td {
        height: 80px;
        &:first-child {
          color: $dftColor;
        }
      }
      tr:nth-child(2) {
        td {
          color: $color;
        }
      }
      tr:last-child{
        td{
          width:100%;
          overflow-x:auto;
        }
      }
    }
  }
  .subOrderInDay {
    border: none;
    &.unemptyArr{
      min-width:100%;
    }
    td {
      border: none;
      border-right: 1px solid $bdColor;
      &:last-child {
        border-right: none;
      }
    }
  }
}

.scrollContainer {
  overflow-x: auto;
}

.content--zr {
  table {
    min-width: 100%;
    width: auto;
  }
  th:first-child,
  td:first-child {
    width: 200px;
    ul{
      border-right: none;
    }
  }
  ul {
    border-right: 1px solid $bdColor;
  }
  li {
    width: 200px;
    height: 80px;
    // font-size: 12px;
    font-size: 14px;
    border-bottom: 1px solid $bdColor;
    &:last-child {
      border-bottom: none;
    }
    &:after {
      //不使用line-height来防止多行文本影响布局
      display: inline-block;
      content: "";
      width: 0;
      height: 100%;
      vertical-align: middle;
    }
  }
  .empty {
    width: 100%;
    min-width: 200px;
    font-size: 12px;
    text-align: center;
  }
}

.fbox {
  display: flex;
}

.check {
  color: #5394fc;
  border-bottom: 1px solid #5394fc;
  cursor: pointer;
}

//
.posLeft{
  float:left;
}

// admin昨日通话监控头部样式
.zrjk__top {
  $btmBorderColor: #bac2cb;
  $btnDftBgColor: #ecf0f3;
  $btnDftColor: #bac2cb;
  $btnChgBgColor: #5394fc;
  $btnChgColor: #fff;
  padding: 20px 23px;
  border: 1px solid $btmBorderColor;
  border-bottom: none;
  background: $btnChgColor;
  text-align: right;
  .el-button {
    padding: 11px 29px;
    color: $btnDftColor;
    background: $btnDftBgColor;
    border: none;
    transition: all .3s;
    &:hover {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
    &.active {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
  }
}

// 质检信息
.zj{
  p{
    padding:20px 20px;
    border:1px solid #bac2cb;
    border-bottom:none;
  }
}
.click{
  color:#20a0ff;
  cursor:pointer;
}
</style>
